<template>
    <view class="pics">
        <scroll-view>
            <view
            @click="leftClickHandle(Index, item.id)"
            :class="active===index?'active':''"
            v-for="(item, index) in cates"
            :key="item.id"
            >
                {{ item.title }}
            </view>
        </scroll-view>
        <scroll-view>
            <view class="item" v-for="item in secondData" :key="item.id">
                <image @click="previewImg(item.img_url)"></image>
                <text>{{ item.title }}</text>
            </view>
            <text v-if="secondData.length === 0"><暂无数据/text>
        </scroll-view>
    </view>
</template>
<script>
export default({
    data(){
        return{
            cates:[],
            active:0,
            secondData:[]
        }
    },
    methods:{
        aasync getPicsCate(){
            const res = await this.$myRequest({
                url:'/api/getimgcategory'
            })
            this.cates = res.data.message
        }
        async leftClickHandle(index, id){
            this.active = index
            const res = await this.$myRequest(){
                url:'/api/getimages'+id
            }
        },
        previewImg(current){
            const urls = this.secondData.map(item=>{
                return item.img_url
            })
            uni.previewImage({
                current, urls
            })
        }
    },
    onLoad(){
        this.getPicsCate()
    }
})
</script>